<template>
  <div class="user">
    <div class="user-poster">
      <div class="flex_top" style="position: relative">
        <div class="userPhoto">
          <img :src="member.avatar ? member.avatar : require('../../assets/qr.png')" />
          <!-- <input
            type="file"
            ref="file"
            name="file"
            accept="image/*"
            v-if="!inWeChat"
          /> -->
        </div>
        <div class="userInfo">
          <p>
            {{ member.name }} {{ member.phone }}
          </p>
          <div class="tag flex_center"><i class="i_level"></i>{{memberLevels[member.level] || ''}}</div>
        </div>
        <van-icon class="i_right" name="arrow" @click="$router.push({ path: '/userInfo' })" />
      </div>
      <van-row class="dataBox">
        <van-col span="6">
          <h3>{{member.money}}</h3>
          <p>账户余额</p>
        </van-col>
        <van-col span="6">
          <h3>{{member.score}}</h3>
          <p>水滴</p>
        </van-col>
        <van-col span="6">
          <h3>{{member.red_bag}}</h3>
          <p>红包</p>
        </van-col>
        <van-col span="6">
          <h3>{{member.option}}</h3>
          <p>期权</p>
        </van-col>
      </van-row>
    </div>
    <div class="myOrder">
      <h3>我的订单</h3>
      <van-row class="user-links">
        <van-col span="8" @click="$router.push({ path: '/myOrder' })">
          <img src="../../assets/i_m_o_1.png" />
          待发货
        </van-col>
        <van-col
          span="8"
          @click="$router.push({ path: '/myOrder', query: { active: 1 } })"
        >
          <img src="../../assets/i_m_o_2.png" />
          已发货
        </van-col>
        <van-col
          span="8"
          @click="$router.push({ path: '/myOrder', query: { active: 2 } })"
        >
          <img src="../../assets/i_m_o_3.png" />
          已完成
        </van-col>
      </van-row>
    </div>
    <div class="myEdit">
      <van-row class="user-links">
        <van-col span="8" @click="$router.push({ path: '/cashOut' })">
          <img src="../../assets/i_m_e_1.png" />
          余额提现
        </van-col>
        <van-col
          span="8"
          @click="$router.push({ path: '/myTeam' })"
        >
          <img src="../../assets/i_m_e_2.png" />
          我的团队
        </van-col>
        <van-col
          span="8"
          @click="$router.push({ path: '/address' })"
        >
          <img src="../../assets/i_m_e_3.png" />
          地址管理
        </van-col>
      </van-row>
      <van-row class="user-links">
        <van-col span="8" @click="goInvite">
          <img src="../../assets/i_m_e_4.png" />
          我的财富码
        </van-col>
        <van-col
          span="8"
          @click="$router.push({ path: '/income' })"
        >
          <img src="../../assets/i_m_e_5.png" />
          收益记录
        </van-col>
        <van-col
          span="8"
          @click="$router.push({ path: '/option' })"
        >
          <img src="../../assets/i_m_e_6.png" />
          我的期权
        </van-col>
      </van-row>
      <van-row class="user-links">
        <van-col span="8" @click="$router.push({ path: '/cardManage' })">
          <img src="../../assets/i_m_e_7.png" />
          银行卡管理
        </van-col>
        <van-col
          span="8"
          @click="$router.push({ path: '/record' })"
        >
          <img src="../../assets/i_m_e_8.png" />
          提现记录
        </van-col>
        <van-col
          span="8"
          @click="$router.push({ path: '/fund' })"
        >
          <img src="../../assets/gongyi@2x.png" />
          公益基金
        </van-col>
      </van-row>
    </div>
    <Footer :active="2"></Footer>
  </div>
</template>

<script>
import axios from 'axios';
import Footer from '../../components/Footer';

export default {
  components: {
    Footer,
  },
  data () {
    return {
      inWeChat: false,
      member: {},
    };
  },
  created () {
    this.inWeChat = navigator.userAgent.match(/MicroMessenger/i) ? true : false
    this.checkLogin((member) => {
      if (this.inWeChat && !member.avatar) {
        location.href = '/api/member/setAvatar'
      }
      this.member = member
    }, true)
  },
  methods: {
    uploadAvatar (e) {
      if (e.target.files.length > 0) {
        let formData = new FormData();
        formData.append('file', e.target.files[0]);
        this.sendReq('file/upload', formData, r => {
          this.member.avatar = r
          this.sendReq('member/save', { avatar: r })
        })
      }
    },
    setAvatar () {
      if (this.inWeChat) {
        location.href = '/api/member/setUserInfo'
      }
    },
    goInvite() {
      if (this.member.level > 1) {
        this.$router.push({ path: '/invite' })
      } else {
        this.alert("您还未升级会员")
      }
    },
  }
};
</script>

<style lang="less" scoped>
.myOrder {
  background: #fff;
  width: 345px;
  border-radius: 15px;
  margin: -40px auto 0 auto;
  position: relative;
  z-index: 4;
  h3 {
    font-size: 15px;
    font-weight: bold;
    color: #28282c;
    padding: 15px 15px 5px 15px;
  }
}
.myEdit {
  background: #fff;
  width: 345px;
  border-radius: 15px;
  margin: 10px auto 0 auto;
  position: relative;
  z-index: 4;
  h3 {
    font-size: 15px;
    font-weight: bold;
    color: #28282c;
    padding: 15px 15px 5px 15px;
  }
}
.myIcon {
  width: 19px;
  height: 19px;
}
.menu {
  padding: 0 15px;
  margin: 10px 0;
  border: none;
  &-group {
    background: #fff;
    border-radius: 5px;
  }
  .van-cell {
    padding: 20px 15px;
  }
  .van-cell:first-child {
    border-radius: 5px 5px 0 0;
  }
  .van-cell:last-child {
    border-radius: 0 0 5px 5px;
  }
  [class*="van-hairline"]::after {
    border: none;
  }
}
.user {
  padding-bottom: 50px;
  &-poster {
    width: 100%;
    height: 210px;
    padding: 0 20px;
    box-sizing: border-box;
    background: #389eff;
    box-sizing: border-box;
    padding-top: 30px;
    position: relative;
    z-index: 1;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    color: #ffffff;
    .userPhoto {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      position: relative;
      z-index: 3;
      margin-right: 18px;
      img {
        display: block;
        width: 48px;
        height: 48px;
        border-radius: 50%;
      }
      input[type="file"] {
        position: absolute;
        z-index: 5;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
      }
    }
    p {
      font-size: 15px;
      font-weight: 400;
      color: #ffffff;
    }
    .tag {
      width: 70px;
      height: 21px;
      background: #57acfc;
      border-radius: 10px;
      font-size: 12px;
      font-weight: 400;
      color: #ffffff;
      margin-top: 10px;
      i {
        display: block;
        width: 13px;
        height: 11px;
        background: url(../../assets/i_level.png) no-repeat center center;
        background-size: 100% 100%;
        margin-right: 5px;
      }
    }
    .i_right {
      color: #fff;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  &-group {
    margin-bottom: 15px;
  }

  &-links {
    padding: 15px 0;
    font-size: 13px;
    color: #666;
    text-align: center;
    background-color: #fff;
    border-radius: 15px;
    img {
      display: block;
      width: 35px;
      height: 35px;
      margin: 0 auto 8px auto;
    }
  }
}
.myEdit {
  .user-links {
    padding: 15px 0;
    font-size: 13px;
    color: #666;
    text-align: center;
    background-color: #fff;
    img {
      display: block;
      width: 23px;
      height: 23px;
      margin: 0 auto 8px auto;
    }
  }
}
.dataBox {
  margin: 26px 0;
  h3 {
    font-size: 17px;
    font-weight: 500;
    color: #ffffff;
  }
  p {
    font-size: 12px;
    font-weight: 400;
    color: #ffffff;
    margin-top: 8px;
  }
}
//css样式，给cell部分从新定义了css样式
.van-cell__title {
  display: flex;
  justify-content: flex-start;
  align-content: center;
  align-items: center;
  color: #28282c;
}
.c1 {
  width: 19px;
  height: 19px;
  img {
    width: 19px;
    height: 19px;
  }
}
.custom-text {
  font-size: 15px;
  margin-left: 10px;
}
</style>
